<template>
    <div>
        <Table :columns="columns1"  :loading="tableload" :data="datases"></Table>
        <br/>
        <Button  :loading="tableload" type="primary" size="small"  @click="submits">导入</Button>
    </div>
</template>

<script>
    export default {
        props: {
            infoId: {
                type: [Boolean,Number,Object,Array],
                default: false
            }
        },
        data() {
            return {
                // datases:this.infoId,
                listDictionary:[],
                tableload:false,
                columns1: [],
                formValidate: {
                    data:[]
                },
                ruleValidate: {
                    condition: [{
                        type: "array",
                        min: 1,
                        required: true,
                        message: "请选择导出数据",
                        trigger: "change"
                    }],
                    grade_id:[{
                        type: "number",
                        required: true,
                        message: "请选择年级",
                        trigger: "change"
                    }],
                    eclass_id: [{
                        type: "array",
                        min: 1,
                        required: true,
                        message: "请选择班级",
                        trigger: "change"
                    }],
                }
            };
        },
        methods: {
            /************************************************************
             * 
             * 数据字典获取数据
             * 
             ************************************************************/
            listDictionaryFun(){
                this.tableload=true//加载完数据动画结束  
                this.$http.get('api/dictionary/v1/dictionary/pidquerys?nationality&Nation&politicaltype')
                .then(response=>{   
                    this.listDictionary=response.data  
                    this.tableload=false//加载完数据动画结束  
                    this.dataList(this.datases)      
                }).catch(err=>{
                    console.log(err);
                    if(err.code && err.code==422) {
                        this.$Message.error(err.message);
                    }
                    this.tableload=false//加载完数据动画结束  
                })

            },

            /************************************************************
             * 
             * 错误数据列表
             * 
             ************************************************************/
            dataList(datass){
                this.columns1= [
                    {
                        title: '身份证号码',
                        width: 180,
                        key: 'identityard_num',
                        render: (h, params) => {
                            return h('div', [
                                h('Input',{
                                    style: {
                                        width: '100%',
                                    },
                                    props:{
                                        placeholder:'身份证号码',
                                        value:datass[params.index].identityard_num.data //默认选中第一个（v-model）
                                    },
                                    on:{
                                        'on-change':(value) => {
                                            this.formValidate.data[params.index].identityard_num=value.target.value
                                            
                                        },
                                    }
                                }),
                                h('div',{
                                    style: {
                                        color: 'red',
                                        display:datass[params.index].identityard_num.message.length==0 ? 'none' : 'block'
                                    },
                                },'*'+datass[params.index].identityard_num.message),
                            ]);
                        }
                    },
                    {
                        title: '学生名称（汉语）',
                        width: 120,
                        key: 'zh_name',
                        render: (h, params) => {
                            return h('div', [
                                h('Input',{
                                    style: {
                                        width: '100%',
                                    },
                                    props:{
                                        placeholder:'学生名称（汉语）',
                                        value:datass[params.index].zh_name.data //默认选中第一个（v-model）
                                    },
                                    on:{
                                        'on-change':(value) => {
                                            this.formValidate.data[params.index].zh_name=value.target.value
                                            
                                        },
                                    }
                                }),
                                h('div',{
                                    style: {
                                        color: 'red',
                                        display:datass[params.index].zh_name.message.length==0 ? 'none' : 'block'
                                    },
                                },'*'+datass[params.index].zh_name.message),
                            ]);
                        }
                    },
                    {
                        title: '学生名称（蒙语）',
                        width: 80,
                        key: 'mn_name',
                        render: (h, params) => {
                            return h('div', [
                                h('Input',{
                                    style: {
                                        width: '100%',
                                    },
                                    props:{
                                        placeholder:'学生名称（蒙语）',
                                        value:datass[params.index].mn_name.data //默认选中第一个（v-model）
                                    },
                                    on:{
                                        'on-change':(value) => {
                                            this.formValidate.data[params.index].mn_name=value.target.value
                                            
                                        },
                                    }
                                }),
                                h('div',{
                                    style: {
                                        color: 'red',
                                        display:datass[params.index].mn_name.message.length==0 ? 'none' : 'block'
                                    },
                                },'*'+datass[params.index].mn_name.message),
                            ]);
                        }
                    },
                    {
                        title: '学籍号',
                        width: 180,
                        key: 'student_number',
                        render: (h, params) => {
                            return h('div', [
                                h('Input',{
                                    style: {
                                        width: '100%',
                                    },
                                    props:{
                                        placeholder:'学籍号',
                                        value:datass[params.index].student_number.data //默认选中第一个（v-model）
                                    },
                                    on:{
                                        'on-change':(value) => {
                                            this.formValidate.data[params.index].student_number=value.target.value
                                            
                                        },
                                    }
                                }),
                                h('div',{
                                    style: {
                                        color: 'red',
                                        display:datass[params.index].student_number.message.length==0 ? 'none' : 'block'
                                    },
                                },'*'+datass[params.index].student_number.message),
                            ]);
                        }
                    },
                    // {
                    //     title: '性别',
                    //     width: 130,
                    //     key: 'sex',
                    //     render: (h, params) => {
                    //         let ss=[
                    //             h('Option', {
                    //                 props: {
                    //                     value:1,
                    //                 }
                    //             },'男'),
                    //             h('Option', {
                    //                 props: {
                    //                     value:2,
                    //                 }
                    //             },'女'),
                    //         ]
                    //         return h('div', [
                    //             h('Select',{
                    //                 style: {
                    //                     width: '100%',
                    //                 },
                    //                 props:{
                    //                     value:datass[params.index].sex.data //默认选中第一个（v-model）
                    //                 },
                    //                 on:{
                    //                     'on-change':(value) => {
                    //                         this.formValidate.data[params.index].sex=value
                                            
                    //                     },
                    //                 }
                    //             },ss),
                    //             h('div',{
                    //                 style: {
                    //                     color: 'red',
                    //                     display:datass[params.index].sex.message.length==0 ? 'none' : 'block'
                    //                 },
                    //             },'*'+datass[params.index].sex.message),
                    //         ]);
                    //     }
                    // },
                    {
                        title: '民族',
                        width: 130,
                        key: 'ethnic',
                        render: (h, params) => {
                            let ss=[]
                            this.listDictionary.Nation.forEach((item)=>{
                                ss.push(h('Option', {
                                    props: {
                                        value:item.dictionary_id,
                                    }
                                },item.dictionary_name))
                            })
                            return h('div', [
                                h('Select',{
                                    style: {
                                        width: '100%',
                                    },
                                    props:{
                                        value:datass[params.index].ethnic.data //默认选中第一个（v-model）
                                    },
                                    on:{
                                        'on-change':(value) => {
                                            this.formValidate.data[params.index].ethnic=value
                                            
                                        },
                                    }
                                },ss),
                                h('div',{
                                    style: {
                                        color: 'red',
                                        display:datass[params.index].ethnic.message.length==0 ? 'none' : 'block'
                                    },
                                },'*'+datass[params.index].ethnic.message),
                            ]);
                        }
                    },
                    {
                        title: '出生年月',
                        width: 150,
                        key: 'birthday',
                        render: (h, params) => {
                            return h('div', [
                                h('DatePicker',{
                                    style: {
                                        width: '100%',
                                    },
                                    props:{
                                        type:'date',
                                        placeholder:'出生年月',
                                        value:datass[params.index].birthday.data //默认选中第一个（v-model）
                                    },
                                    on:{
                                        'on-change':(val) => {
                                            this.formValidate.data[params.index].birthday=val
                                            
                                        },
                                    }
                                }),
                                h('div',{
                                    style: {
                                        color: 'red',
                                        display:datass[params.index].birthday.message.length==0  ? 'none' : 'block'
                                    },
                                },'*'+datass[params.index].birthday.message),
                            ]);
                        }
                    },
                    {
                        title: '邮箱',
                        width: 150,
                        key: 'email',
                        render: (h, params) => {
                            return h('div', [
                                h('Input',{
                                    style: {
                                        width: '100%',
                                    },
                                    props:{
                                        placeholder:'邮箱',
                                        value:datass[params.index].email.data  //默认选中第一个（v-model）
                                    },
                                    on:{
                                        'on-change':(value) => {
                                            this.formValidate.data[params.index].email=value.target.value
                                            
                                        },
                                    }
                                }),
                                h('div',{
                                    style: {
                                        color: 'red',
                                        display:datass[params.index].email.message.length==0 ? 'none' : 'block'
                                    },
                                },'*'+datass[params.index].email.message),
                            ]);
                        }
                    },
                    {
                        title: '国籍',
                        width: 150,
                        key: 'country',
                        render: (h, params) => {
                            let ss=[]
                            this.listDictionary.nationality.forEach((item)=>{
                                ss.push(h('Option', {
                                    props: {
                                        value:item.dictionary_id,
                                    }
                                },item.dictionary_name))
                            })
                            return h('div', [
                                h('Select',{
                                    style: {
                                        width: '100%',
                                    },
                                    props:{
                                        value:datass[params.index].country.data//默认选中第一个（v-model）
                                    },
                                    on:{
                                        'on-change':(value) => {
                                            this.formValidate.data[params.index].country=value
                                            
                                        },
                                    }
                                },ss),
                                h('div',{
                                    style: {
                                        color: 'red',
                                        display:datass[params.index].country.message.length==0 ? 'none' : 'block'
                                    },
                                },'*'+datass[params.index].country.message),
                            ]);
                        }
                    },
                    {
                        title: '入学年月',
                        width: 150,
                        key: 'admissions',
                        render: (h, params) => {
                            return h('div', [
                                h('DatePicker',{
                                    style: {
                                        width: '100%',
                                    },
                                    props:{
                                        type:'month',
                                        placeholder:'入学年月',
                                        value:datass[params.index].admissions.data//默认选中第一个（v-model）
                                    },
                                    on:{
                                        'on-change':(value) => {
                                            this.formValidate.data[params.index].admissions=value
                                            
                                        },
                                    }
                                }),
                                h('div',{
                                    style: {
                                        color: 'red',
                                        display:datass[params.index].admissions.message.length==0 ? 'none' : 'block'
                                    },
                                },'*'+datass[params.index].admissions.message),
                            ]);
                        }
                    },
                    {
                        title: '政治面貌',
                        width: 150,
                        key: 'political_id',
                        render: (h, params) => {
                            let ss=[]
                            this.listDictionary.politicaltype.forEach((item)=>{
                                ss.push(h('Option', {
                                    props: {
                                        value:item.dictionary_id,
                                    }
                                },item.dictionary_name))
                            })
                            return h('div', [
                                h('Select',{
                                    style: {
                                        width: '100%',
                                    },
                                    props:{
                                        value:datass[params.index].political_id.data//默认选中第一个（v-model）
                                    },
                                    on:{
                                        'on-change':(value) => {
                                            this.formValidate.data[params.index].political_id=value
                                            
                                        },
                                    }
                                },ss),
                                h('div',{
                                    style: {
                                        color: 'red',
                                        display:datass[params.index].political_id.message.length==0 ? 'none' : 'block'
                                    },
                                },'*'+datass[params.index].political_id.message),
                            ]);
                        }
                    }
                ]

            },

            /************************************************************
             * 
             * 点击保存
             * 
             ************************************************************/
            submits(){
                this.tableload=true
                this.$http.post('api/student/v1/import/array',this.formValidate)
                .then(val=>{ 
                    this.$emit("backList", true);  
                })
                .catch(err=>{
                    console.log(err);
                    if(err.code && err.code==422) {
                        this.$Message.error(err.message);
                    }
                    this.datases =JSON.parse(JSON.stringify(err.data))
                    this.tableload=false
                })
            }, 
            dataFun(){
                this.formValidate.data = this.datases.map((item,index)=>{
                    let arr = {
                        identityard_num:item.identityard_num.data,
                        zh_name:item.zh_name.data,
                        mn_name:item.mn_name.data,
                        student_number:item.student_number.data,
                        ethnic:item.ethnic.data,
                        birthday:item.birthday.data,
                        email:item.email.data,
                        country:item.country.data,
                        admissions:item.admissions.data,
                        political_id:item.political_id.data,
                        // sex:item.sex.data,
                        eclass_id:item.eclass_id,
                    }
                    return arr
                })
            }
        },
        created(){
            this.dataFun()
            this.listDictionaryFun()
        },
        computed:{
            datases :{
                get : function (){
                    let aaa = this.infoId.map((item,index)=>{
                        let arr = {
                            identityard_num:{
                                data :item.identityard_num  != undefined ? item.identityard_num.data : '',
                                message:item.identityard_num  != undefined ? item.identityard_num.message : [],
                            },
                            zh_name:{
                                data :item.zh_name != undefined  ? item.zh_name.data : '',
                                message:item.zh_name != undefined  ? item.zh_name.message : [],
                            },
                            mn_name:{
                                data :item.mn_name  != undefined ? item.mn_name.data : '',
                                message:item.mn_name  != undefined ? item.mn_name.message : [],
                            },
                            student_number:{
                                data :item.student_number != undefined  ? item.student_number.data : '',
                                message:item.student_number != undefined  ? item.student_number.message : [],
                            },
                            // sex:{
                            //     data :item.sex  != undefined ? item.sex.data : '',
                            //     message:item.sex  != undefined ? item.sex.message : [],
                            // },
                            ethnic:{
                                data :item.ethnic  != undefined ? item.ethnic.data : '',
                                message:item.ethnic  != undefined ? item.ethnic.message : [],
                            },
                            birthday:{
                                data :item.birthday != undefined ? item.birthday.data : '',
                                message:item.birthday != undefined ? item.birthday.message : [],
                            },
                            email:{
                                data :item.email  != undefined ? item.email.data : '',
                                message:item.email  != undefined ? item.email.message : [],
                            },
                            country:{
                                data :item.country  != undefined ? item.country.data : '',
                                message:item.country  != undefined ? item.country.message : [],
                            },
                            admissions:{
                                data :item.admissions  != undefined ? item.admissions.data : '',
                                message:item.admissions  != undefined ? item.admissions.message : [],
                            },
                            political_id:{
                                data :item.political_id  != undefined ? item.political_id.data : '',
                                message:item.political_id  != undefined ? item.political_id.message : [],
                            },
                            eclass_id:item.eclass_id.data,
                        }
                        return arr
                    })
                    return  aaa
                },
                set: function (newValue) {
                    let aaa = newValue.map((item,index)=>{
                        let arr = {
                            identityard_num:{
                                data :item.identityard_num  != undefined ? item.identityard_num.data : '',
                                message:item.identityard_num  != undefined ? item.identityard_num.message : [],
                            },
                            zh_name:{
                                data :item.zh_name != undefined  ? item.zh_name.data : '',
                                message:item.zh_name != undefined  ? item.zh_name.message : [],
                            },
                            mn_name:{
                                data :item.mn_name  != undefined ? item.mn_name.data : '',
                                message:item.mn_name  != undefined ? item.mn_name.message : [],
                            },
                            student_number:{
                                data :item.student_number != undefined  ? item.student_number.data : '',
                                message:item.student_number != undefined  ? item.student_number.message : [],
                            },
                            // sex:{
                            //     data :item.sex  != undefined ? item.sex.data : '',
                            //     message:item.sex  != undefined ? item.sex.message : [],
                            // },
                            ethnic:{
                                data :item.ethnic  != undefined ? item.ethnic.data : '',
                                message:item.ethnic  != undefined ? item.ethnic.message : [],
                            },
                            birthday:{
                                data :item.birthday != undefined ? item.birthday.data : '',
                                message:item.birthday != undefined ? item.birthday.message : [],
                            },
                            email:{
                                data :item.email  != undefined ? item.email.data : '',
                                message:item.email  != undefined ? item.email.message : [],
                            },
                            country:{
                                data :item.country  != undefined ? item.country.data : '',
                                message:item.country  != undefined ? item.country.message : [],
                            },
                            admissions:{
                                data :item.admissions  != undefined ? item.admissions.data : '',
                                message:item.admissions  != undefined ? item.admissions.message : [],
                            },
                            political_id:{
                                data :item.political_id  != undefined ? item.political_id.data : '',
                                message:item.political_id  != undefined ? item.political_id.message : [],
                            },
                            eclass_id:item.eclass_id.data,
                        }
                        return arr
                    })
                    this.dataList(aaa)
                    return  aaa

                }
            }
        }
    
    };
</script>


